<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        #d1 {
            background-color: gray;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }

        #d2 {
            background-color: orange;
            width: 200px;
            height: 100px;
            margin: 150px auto;

            /*让文字水平居中*/
            text-align: center;
            /*line-height是里面文字行高,和height一样就垂直居中了*/
            line-height: 100px;
        }

        #d3 {
            background-color: gray;
            width: 400px;
            height: 400px;
            /*这两个属性可以调整文字，行内元素，行内块元素,让行内文字垂直居中*/
            text-align: center;
            line-height: 400px;
        }

        #s1 {
            background-color: orange;
            font-size: 20px;
        }

        #d4 {
            background-color: gray;
            width: 400px;
            height: 400px;
            /*这两个属性可以调整文字，行内元素，行内块元素,让行内文字垂直居中*/
            text-align: center;
            line-height: 400px;
            font-size: 0px;
        }

        #s2 {
            font-size: 40px;
            background-color: orange;
            vertical-align: middle;

        }

        #img1 {
            /*设置和文字(块的文字)垂直居中对齐,这里是把块文字大小设置为0,然后文字用span,也设置为垂直居中*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<!--布局一，一个大div里面一个居中div,里面文字也是居中的-->
<div id="d1">
    <div id="d2">inner</div>
</div>
<hr>
<!--布局二，一个大div里面一个居中span-->
<div id="d3">
    <span id="s1">一起出来玩啊</span>
</div>
<hr>
<!--布局三，一个大div里面一个居中span，span旁边一个img,span和img都是居中的-->
<div id="d4">
    <span id="s2">出来玩啊？X</span>x<img id="img1" src="../../images/test1.png" width="100px" height="100px">
</div>

<hr>
<img src="../../images/布局小技巧.png" width="500px" height="500px">
</body>
</html>